<html>

<head>
    <title>Highcharts 带标签曲线</title>
    <meta charset="utf-8">
    <style>
        #container {
            width: 550px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <script src="../lib/code/highcharts.js"></script>
    <script src="../lib/code/modules/data.js"></script>
    <script src="../lib/code/modules/series-label.js"></script>
    <script src="../lib/code/modules/exporting.js"></script>
    <script src="../lib/code/modules/export-data.js"></script>
    <script src="../lib/code/modules/accessibility.js"></script>
    <script>
        $(function () {

            Highcharts.chart('container', {
                chart: {
                    scrollablePlotArea: {
                        minWidth: 700
                    }
                },

                data: {
                    csvURL: 'http://loc-front.org/highcharts/basic/analytics.csv',
                    beforeParse: function (csv) {
                        return csv.replace(/\n\n/g, '\n');
                    }
                },

                title: {
                    text: 'Daily sessions at www.highcharts.com'
                },

                subtitle: {
                    text: 'Source: Google Analytics'
                },

                xAxis: {
                    tickInterval: 7 * 24 * 3600 * 1000, // one week
                    tickWidth: 0,
                    gridLineWidth: 1,
                    labels: {
                        align: 'left',
                        x: 3,
                        y: -3
                    }
                },

                yAxis: [{ // left y axis
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'left',
                        x: 3,
                        y: 16,
                        format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                }, { // right y axis
                    linkedTo: 0,
                    gridLineWidth: 0,
                    opposite: true,
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'right',
                        x: -3,
                        y: 16,
                        format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                }],

                legend: {
                    align: 'left',
                    verticalAlign: 'top',
                    borderWidth: 0
                },

                tooltip: {
                    shared: true,
                    crosshairs: true
                },

                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function (e) {
                                    hs.htmlExpand(null, {
                                        pageOrigin: {
                                            x: e.pageX || e.clientX,
                                            y: e.pageY || e.clientY
                                        },
                                        headingText: this.series.name,
                                        maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                                            this.y + ' sessions',
                                        width: 200
                                    });
                                }
                            }
                        },
                        marker: {
                            lineWidth: 1
                        }
                    }
                },

                series: [{
                    name: 'All sessions',
                    lineWidth: 4,
                    marker: {
                        radius: 4
                    }
                }, {
                    name: 'New users'
                }]
            });



        });
    </script>
</body>

</html>